<template>
  <div id="home">
    <!-- 在home中导入nav组件 -->
    <nav-bar class="home-nav"><div slot="center">购物街</div></nav-bar>
    <tab-control :title="['流行','新款','精选']"  
                  @tabClick="tabClick" 
                  ref="tabContral1"
                  class="tabcontrol tab-contral"
                  v-show="isTabFixed" ></tab-control>
    <scroll class="content" 
            ref="scroll"
            :probe-type="3"
           :pull-up-load="true"
            @scroll="contentScroll"
            @pullingUp="loadMore" >    
  <!-- 轮播图区域 -->
   <home-swiper :banners="banners" @swiperImageLoad="swiperImageLoad"></home-swiper>
   <!-- 页面展示 -->
   <home-recommend :recommends="recommends"></home-recommend>
   <feature-view></feature-view>
    <tab-control :title="['流行','新款','精选']"  
                  @tabClick="tabClick" 
                  ref="tabContral2"
                  class="tab-contral" ></tab-control>
    <goods-list :goods="showgoods"></goods-list>
    </scroll>
 <back-top @click.native="backClick" v-show="isShowBackTop"/>   <!-- //监听自定组件，需要在click后面跟修饰符.native -->
  
  </div>
</template>

<script>
// 导入home子组件
import HomeSwiper from './childCops/HomeSwiper'
import HomeRecommend from './childCops/HomeRecommend'
import FeatureView from './childCops/FeatureView'

// 导入公共组件
import NavBar from '@/components/common/navbar/NavBar'
import TabControl from '@/components/content/tabControl/TabControl'
import GoodsList from '@/components/content/good/GoodsList'
import Scroll from '@/components/common/scroll/Scroll'
import BackTop from '@/components/content/backtop/BackTop' 
// 导入home网络请求函数
import {getHomeMultidate,getHomeGoods} from '@/network/home'   //这里导入网络请求代码
import {itemListenerMixin,isShowBackTop} from '../../common/mixin'

export default {
  name: "Home",
  components:{
    NavBar,
    HomeSwiper,
    HomeRecommend,
    FeatureView,
    TabControl,
    GoodsList,
    Scroll,
    BackTop

  },
   mixins:[itemListenerMixin,isShowBackTop],
  data() {
    return{
      banners:[],
      recommends:[],
      goods:{   //定义商品对象，用来储存请求过来的goods信息
              'pop':{page:0, list:[]},   //定义数据的时候需要到引号
              'new':{page:0, list:[]},
              'sell':{page:0, list:[]}
    },
     currentType:'pop',  //设置默认type类型
    //isShowBackTop:false,
     tabOffsetTop:0,
     isTabFixed:false, //决定tabcontaol是否吸顶
     saveY:0,

      } 
     
  },
  mounted() {
    // console.log('我是home中的数据');
  },
   computed:{
    showgoods(){
    return this.goods[this.currentType].list
      },
    activated() {  //使用该方法之前，要再App.vue中添加<keep-alive>,防止页面销毁
    this.$refs.scroll.scrollTo(0,this.saveY,0)
    this.$refs.scroll.refresh() //当返回页面时，将页面的位置显示到上次记录的地方
  },
  deactivated() { //离开时页面时保存
  // console.log('离开');
    this.saveY=this.$refs.scroll.getScrollY()  //离开该页面时，记录当面页面中滚动过的位置
    this.$bus.$off('itemImgLoad',this.itemImgListener)  //取消全局监听事件
  },


   },
  
  created() {
    this.getHomeMultidate()
    this.getHomeGoods('pop')
    this.getHomeGoods('new')
    this.getHomeGoods('sell')
     
  },
 
    // 图片完成加载的事件监听
  //  const refresh = debounce(this.$refs.scroll.refresh,500)  //防抖动函数,避免用户每输入一个字符都想服务器发送请求
  //  this.itemImgListener=()=>{
    //  Refresh()
   
  //  this.$bus.$on('itemImgLoad',this.itemImgListener)
    // this.$bus.$on('itemImageLoad',()=>{  //监听接受事件总线传递出来的事件，在每一个item加载完成后，刷新页面
      // refresh()
    // })
  
  
  methods: {
//这里是事件监听事件
  tabClick(index){
switch(index){
  case 0: this.currentType='pop'
  break
  case 1: this.currentType='new'
  break
  case 2: this.currentType='sell'
  break
}
this.$refs.tabContral1.curentIndex=index  //监听点击，让两个tabContral中被选中的index保持一致
this.$refs.tabContral2.curentIndex=index
},
// 回到顶部事件
  // backClick(){
  // this.$refs.scroll.scrollTo(0,0)  //获取DOM中的scroll组件中的scrollTo方法确定点击事件发生后，页面滚动的位置以及事件
  // },
  contentScroll(position){  //当页面滚动到坐标大于1000isShowBackTop为true
  this.isShowBackTop=position.y<-1000
  this.isTabFixed = -(position.y)>this.tabOffsetTop

  },
  loadMore(){   //实现上拉加载更多
  this.getHomeGoods(this.currentType)
  // this.$refs.scroll.scroll.refresh()   //当图片加载完成后重新计算可滚动区域,消除页面无法滚动bug
  },
  // 用来监听轮播图图片是否加载完毕
  swiperImageLoad(){
    // $el用来获取组件属性
   this.tabOffsetTop=this.$refs.tabContral2.$el.offsetTop;  //offsetTop可以获取元素距离页面顶端的高度

  },



    // 以下是网络请求事件
    getHomeMultidate(){
     getHomeMultidate().then(res=>{
      this.banners=res.data.data.banner.list; //使用result储存从后台调用过来的数据
      this.recommends=res.data.data.recommend.list  
     })
  },
  getHomeGoods(type){
    const page = this.goods[type].page + 1
   getHomeGoods(type,page).then(res=>{
    this.goods[type].list.push(...res.data.data.list) //使用...res时无须显示数据个数
    this.goods[type].page +=1
    this.$refs.scroll.finishPullUp()
  })
  },
  }
  
};
</script>

<style scoped>
#home{
  /* position: relative;
  left: 0;
  padding-top: 44px; */
   height: 100vh; /* 设置视口高度,数字表示视口百分比*/
}
.home-nav{
  background-color: #ff8198;
  color: #fff;
  text-align: center;
  line-height: 44px;
  /* position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index:9 */
}
.tabcontrol{
  position: relative; /*设置相对定位*/
  z-index: 9;

}
.tab-contral{
  background-color: #fff;
}
.content{
  overflow: hidden;
  height: calc(100% - 44px);
    /* position: absolute;
    top: 44px;
    bottom: 49px;
    right: 0;
    left: 0;  */
}




</style>